import React, { useRef } from "react";
import { useDispatch } from "react-redux";
import { HIDE_TABBER, SHOW_TABBER } from "../store/action-type/tabber";
import "../MIUIcss/Findtype/Find.scss";
import {
  MessageFill,
  GiftOutline,
  KoubeiOutline,
  FaceRecognitionOutline,
  CouponOutline,
} from "antd-mobile-icons";
import { Button, SearchBar } from "antd-mobile";
import { useHistory } from "react-router-dom";
function Find() {
  const dispatch = useDispatch();
  const { replace, push } = useHistory();
  return (
    <div className="Find-box">
      <div className="Find-searchbox">
        <SearchBar
          placeholder="请输入内容"
          className="find-search"
          style={{ "--border-radius": "5px" }}
        />
        <MessageFill className="Message-ico" style={{ fontSize: 36 }} />
      </div>
      <div className="find-advice">
        <img src="../src/image/Find/findimg02.png" alt="" />
      </div>
      <div className="find-Secondskill">
        <ul>
          <li>
            <GiftOutline
              style={{ fontSize: 36 }}
              onClick={() => {
                push("/Selectphone");
                dispatch({ type: SHOW_TABBER });
              }}
              color="#ff8a23"
            />
            <p>挑选手机</p>
          </li>
          <li>
            <KoubeiOutline style={{ fontSize: 36 }} color="#8463d2" />
            <p>限时秒杀</p>
          </li>
          <li>
            <FaceRecognitionOutline style={{ fontSize: 36 }} color="#4a95e9" />
            <p>小米众筹</p>
          </li>
          <li>
            <CouponOutline style={{ fontSize: 36 }} color="#ee6464" />
            <p>特惠秒杀</p>
          </li>
        </ul>
      </div>
      <div className="find-shop">
        <img src="../../src/image/Find/img03.jpg" alt="" />
        <div className="shop-desc">
          <p>小米之家北京朝阳合生汇店</p>
          <b>距离1公里</b>
        </div>
        <div className="shop-more">
          <p
            onClick={() => {
              push("/meterhome");
            }}
          >
            其他零售店→
          </p>
        </div>
      </div>
      <div className="find-h-box">
        <h3>商城早报</h3>
      </div>
      <div className="find-news">
        <img
          src="../../src/image/Find/findnew.png"
          alt=""
          onClick={() => {
            push("/article");
            dispatch({ type: SHOW_TABBER });
          }}
        />
        <div className="find-newsconent">
          <h3>小米感恩季福利加码 再送100元手机券</h3>
          <p>
            小米2017感恩季火热进行中，除了100万张100元现金券，
            <br />
            又有新的福利来了!
          </p>
          <div className="new-reading">
            <b>7小时前</b>
            <p>
              <span>1000</span>阅读
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Find;
